<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Vue直接引入Script资源</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script>
new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log("new: %s, old: %s", val, oldVal);
    },
    //方法名
    b: "someMethod",
    //该回调会在任何被侦听的property改变时被调用,无论嵌套多深
    c: {
      handler: function (val, oldVal) {

      },
      deep: true
    },
    //该会回调在侦听开始之后被立刻调用
    d: {
      handler: "someMethod",
      immediate: true
    },
    e: [
      "handle1",
      function handle2(val, oldVal) {

      },
      {
        handler: function handle3 (val, oldVal) {

        }
      }
    ],
    // watch vm.e.f's value:{g:5}
    "e.f": function (val, oldVal) {

    }
  },
  methods: {
    someMethod() {}
  }
});
vm.a = 2;//=>new: 2, old:1
</script>
</body>
</html>